<template>
  <div class="forecastPlan">
    <TitleColumn name="钱仓圩需水预报" />
    <div class="content">
      <ul class="list">
        <li class="listItem">
          <i class="icon1"></i>
          <p>总需水量</p>
          <strong>261211<span>万m³</span></strong>
        </li>
        <li class="listItem">
          <i class="icon2"></i>
          <p>种植面积</p>
          <strong>4839.78<span>亩</span></strong>
        </li>
      </ul>
      <!-- 图表主体 -->
      <div class="chartContent" ref="chartRef"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import TitleColumn from "@/components/TitleColumn";
import { useECharts } from "@gui-pkg/hooks";
import setChartOption from "./chartOption";

defineOptions({ name: "ForecastPlan" });

const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
const state = reactive({
  name: "vue3",
});

onMounted(() => {
  const chartOption = setChartOption();
  setOptions(chartOption);
});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.forecastPlan {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  grid-row-gap: 10px;
  box-sizing: border-box;
  background: #02123433;
  backdrop-filter: blur(10px);
  .content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    ul.list {
      display: flex;
      align-items: center;
      height: 50px;
      li.listItem {
        width: 296px;
        height: 50px;
        background: url(./images/bg.png) no-repeat;
        background-size: 100% 100%;
        margin-right: 20px;
        padding-top: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        .icon1 {
          width: 34px;
          height: 32px;
          display: inline-block;
          background: url(./images/icon1.png) no-repeat;
          background-size: contain;
          margin-right: 10px;
          margin-top: 6px;
        }
        .icon2 {
          width: 34px;
          height: 32px;
          display: inline-block;
          background: url(./images/icon2.png) no-repeat;
          background-size: contain;
          margin-right: 10px;
          margin-top: 6px;
        }
        p {
          font-size: 15px;
          margin-right: 10px;
        }
        strong {
          font-size: 20px;
          span {
            font-size: 14px;
            font-weight: normal;
            margin-left: 6px;
          }
        }
      }
    }
    .chartContent {
      width: 100%;
      height: calc(100% - 60px);
    }
  }
}
</style>
